import Card from "../../ui/card/Card";
import RequestBody from "./requestBody/RequestBody";
import RequestFormSent from "./requestFormSent/RequestFormSent";
import useAllMessage from "./useAllMessages";

import classes from "./ApplicationRequest.module.scss";
import { useEffect } from "react";

const ApplicationRequest = ({ typeOfCommunication, recipientId }) => {
  const { isMessageListPending, messageList, messageListHandler } =
    useAllMessage(typeOfCommunication);

  useEffect(() => {
    messageListHandler();
  }, [typeOfCommunication]);

  return (
    <Card className={classes["application-request-card"]}>
      <RequestBody data={messageList} />

      <RequestFormSent
        recipientId={recipientId}
        updateMessageList={messageListHandler}
        isMessageListPending={isMessageListPending}
      />
    </Card>
  );
};

export default ApplicationRequest;